<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<!--
Pottononline.net map location editor
Use GMarkerManager when displaying maps, but not ideal for editing
-->

 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Potton Online Map Point Position Editor</title>

   <style type="text/css" rel="stylesheet">
    #mysubmit {font-weight: bold;}
   </style>

   <!-- <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BR_tirkabJaindNc0FoauOGCOWtrBTLuwigpG4UD6tSDw3AxxYNXLmcVg" type="text/javascript"></script>  pottononline.net key -->
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BQj6YRfL0tvcbwsLNELCkRRPSQvexR2rS6tk8QZTiL5z_yQMRUGEde7Ow" type="text/javascript"></script> <!-- whizzy.org key -->

   <script type="text/javascript">

   //<![CDATA[
   
   var MARKERS = [];

   function load() {
     if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map"));
       map.setCenter(new GLatLng(52.1287, -0.2129), 14);
       var mapControl = new GMapTypeControl();
       map.addControl(mapControl);
       map.addControl(new GLargeMapControl());
       map.enableScrollWheelZoom();

        GEvent.addListener(map, "click", function(overlay, latlng) {
              if (latlng) {
                      var marker = new GMarker(latlng, {draggable:true, bouncy:false});
                      MARKERS[MARKERS.length] = marker;
                      marker.myid = (MARKERS.length)-1;
                      GEvent.addListener(marker, "click", function() {
                              if (!marker.myform) {
                                  marker.myform = document.getElementById("markerinfo").cloneNode(true);
				  marker.myform.getElementsByTagName("button")[0].onclick = function(e) {
          // Delete button pressed
					marker.closeInfoWindow();					
					map.removeOverlay(marker);
					var tempmarkers = [];
					for (var i=0; i<MARKERS.length; i++) {
					    if (MARKERS[i] != marker) {
					      tempmarkers[tempmarkers.length] = MARKERS[i];
					    }
					}
					MARKERS = tempmarkers;
 					if (e) { 
 					    e.preventDefault(); 
					    e.stopPropagation(); 
					} else { 
					    window.event.returnValue = false; 
					    window.event.cancelBubble = true; 
					}
				        return false;
			          }

                                  marker.myform.onsubmit = function(e) {
                                      // info Submit button pressed
                                      marker.namedata = this.getElementsByTagName("input")[0].value;
                                      marker.typedata = this.getElementsByTagName("select")[0].value;
                                      // now build string for the form
                                      marker.formdata = '<input type="text" name="'+marker.myid.toString()+'" value="'+marker.namedata+','+marker.typedata+','+marker.getLatLng()+'">';
                                      alert(marker.formdata);
                                      document.getElementById("markerdata").appendChild(marker.formdata);
                                      
                                      marker.closeInfoWindow();
                                      if (e) {
                                          e.preventDefault();
                                          e.stopPropagation();
                                      } else {
                                          window.event.returnValue = false;
                                          window.event.cancelBubble = true;
                                      }
                                      return false;
                                  }
                              }
                              marker.openInfoWindow(marker.myform);
                      });
                      map.addOverlay(marker);
              }
      });
 

     }
   };
   
   function showeverything() {
       for (i=0; i<MARKERS.length; i++) {
           alert(MARKERS[i].namedata+" "+MARKERS[i].typedata+" "+MARKERS[i].getLatLng()+" "+MARKERS[i].myid);
       }
   };

   //]]>
   </script>

 </head>

 <body onload="load()" onunload="GUnload()" style="height: 100%">
   <div id="map" style="width: 100%; height: 96%"></div>
   <div style="display:none">
     <form id="markerinfo">
        <p>Name: <input type="text" name="name"></p>
        <p>Type: 
          <select name="type">
          <option value="pub">Pub
          <option value="pubfood">Pub with food
          <option value="business">Business
          <option value="shop">Shop
          <option value="ammeneites">Ammeneites
          <option value="clubssoc">Clubs & Societys
          <option value="entertainment">Entertainment
          <option value="nature">Nature
          <option value="poi">Point of interest
          </select>
        </p>
        <p>
          <button id="delete"><font style="color: red;">Delete</font></button>
          <button id="close">Close</button>
          <input type="submit" id="mysubmit" value="Save Marker" >
        </p>
     </form>

    <form id="markerdata" method="post" action="editorform.py" >
      <input type="submit" value="save all">
    </form>

   </div>

  <button onclick="showeverything()">Press this to list everything</button>
 </body>
</html>
